<div class="main-container">
  <div class="row">
    <div fGrid="6" class="free-demo-board">
      <p>
        {{'DEMO.FLOW.DESCRIPTION' | translate}}
      </p>
      <hr>
      <h3 class="free-head-title">{{'API-OPTION' | translate}}<span class="symbol component"></span></h3>

      <div class="free-demo-row">
        <h3 class="free-title">free-flow</h3>
        <p>{{'COMPONENT.FLOW' | translate}}</p>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'PROPERTY' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>style</free-table-cell>
              <free-table-cell>
                <ng-template><code>Object</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.FLOW.OPTION.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
            <free-table-row>
              <free-table-cell>lazy</free-table-cell>
              <free-table-cell>
                <ng-template><code>Boolean</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.FLOW.OPTION.1' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>

        <h3 class="free-title">{{'EVENT' | translate}}</h3>
        <free-table>
          <free-table-header>
            <free-table-row>
              <free-table-head><ng-template>{{'EVENT' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'TYPE' | translate}}</ng-template></free-table-head>
              <free-table-head><ng-template>{{'DESCRIPTION' | translate}}</ng-template></free-table-head>
            </free-table-row>
          </free-table-header>

          <free-table-body>
            <free-table-row>
              <free-table-cell>onInfiniteScroll</free-table-cell>
              <free-table-cell>
                <ng-template><code>Function</code></ng-template>
              </free-table-cell>
              <free-table-cell>
                <ng-template>{{'DEMO.FLOW.EVENTS.0' | translate}}</ng-template>
              </free-table-cell>
            </free-table-row>
          </free-table-body>
        </free-table>

        <h3 class="free-title">free-flow-item</h3>
        <p>{{'DEMO.FLOW.INTRO.0' | translate}}</p>
      </div>
    </div>

    <div class="free-demo-board" fGrid="6">
      <div class="free-card-board">
        <h3 class="free-toolbar">Import</h3>
        <free-tab-group direction="right" theme="line">
          <free-tab header="CODE">
            <free-code lang="typescript">
              import &#123;FlowModule&#125; from 'freeng/freeng';
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Default</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-flow (onInfiniteScroll)="onInfiniteScroll($event)"
              [style]="{height: '300px', width: '450px', 'border': '1px solid #d9d9d9'}">
              <free-flow-item *ngFor="let i of lis">
                <div class="flow-item">
                  {{i}}
                </div>
              </free-flow-item>
            </free-flow>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-flow (onInfiniteScroll)="onInfiniteScroll($event)"
                         [style]="&#123;height: '300px', width: '450px', 'border': '1px solid #d9d9d9'&#125;"&gt;
                &lt;free-flow-item *ngFor="let i of lis"&gt;
                  &lt;div class="flow-item"&gt;
                    &#123;&#123;i&#125;&#125;
                  &lt;/div>
                &lt;/free-flow-item&gt;
              &lt;/free-flow&gt;
            </free-code>
            <h4>Javascript:</h4>
            <free-code lang="typescript">
              onInfiniteScroll(event: any) &#123;
                const page = event.page;
                setTimeout(() => &#123;
                  if (page < 5) &#123;
                    for (let i = 0; i < 8; i++) &#123;
                      this.lis.push((page - 1) * 8 + i + 1 );
                    &#125;
                  &#125;
                  event.next('NO MORE!', page >= 5);
                &#125;, 500);
              &#125;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

      <div class="free-card-board">
        <h3 class="free-toolbar">Lazy load</h3>
        <free-tab-group direction="right">
          <free-tab header="PREVIEW">
            <free-flow [lazy]="true" (onInfiniteScroll)="onInfiniteScroll2($event)"
                       [style]="{height: '300px', width: '450px', 'border': '1px solid #d9d9d9'}">
             <free-flow-item *ngFor="let item of images">
               <div class="flow-item">
                 <img [attr.lazy-src]="item.src" alt="">
               </div>
             </free-flow-item>
            </free-flow>
          </free-tab>
          <free-tab header="CODE">
            <free-code lang="html">
              &lt;free-flow [lazy]="true" (onInfiniteScroll)="onInfiniteScroll2($event)"
                         [style]="&#123;height: '300px', width: '450px', 'border': '1px solid #d9d9d9'&#125;"&gt;
                &lt;free-flow-item *ngFor="let item of images"&gt;
                  &lt;div class="flow-item"&gt;
                    &lt;img [attr.lazy-src]="item.src" alt=""&gt;
                  &lt;/div&gt;
                &lt;/free-flow-item&gt;
              &lt;/free-flow&gt;
            </free-code>
          </free-tab>
        </free-tab-group>
      </div>

    </div>
  </div>
  <blockquote>FreeNG - {{'MOTTO' | translate}}</blockquote>
</div>
